<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆瓣同城</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/home.css">
</head>

<body>
    <!-- 头部导航 -->
    <div id="tonglan">
        <div id="banxin">
            <div id="city">
                <h1>豆瓣同城</h1>
                <span>北京</span>
                <ul>
                    <li>近期活动</li>
                    <li>主办方</li>
                    <li>舞台剧</li>
                </ul>
                <input type="text" placeholder="活动/舞台剧/地点">
            </div>
        </div>
    </div>

    <!-- 热门活动 -->
    <div id="activity">
        <!-- 头部 -->
        <div class="hd-header">
            <h2>热门活动</h2>
            <div>
                <span>3/4</span>
                <span>&lt;</span>
                <span>&gt;</span>
            </div>

        </div>

        <!-- 轮播图列表 -->
        <div class="hd-List">

            <ul>
                <li><img src="https://img1.doubanio.com/pview/event_poster/large/public/d7673d444438cd9.jpg" alt="">
                    <a href="##">我是图片</a>
                </li>
                <li><img src="https://img1.doubanio.com/pview/event_poster/large/public/d7673d444438cd9.jpg" alt="">
                    <a href="##">我是图片</a>
                </li>
                <li><img src="https://img1.doubanio.com/pview/event_poster/large/public/d7673d444438cd9.jpg" alt="">
                    <a href="##">我是图片</a>
                </li>
                <li><img src="https://img1.doubanio.com/pview/event_poster/large/public/d7673d444438cd9.jpg" alt="">
                    <a href="##">我是图片</a>
                </li>
                <li><img src="https://img1.doubanio.com/pview/event_poster/large/public/d7673d444438cd9.jpg" alt="">
                    <a href="##">我是图片</a>
                </li>
            </ul>


        </div>
    </div>
    <!-- 列表 -->
    <div id="inline-list">
        <div class="list">
            <ul class="crow">
                <li class="col">
                    <div class="cats-detail">
                        <h5>
                            <a href="##">音乐&gt;</a>
                        </h5>
                        <ul>
                            <li><a href="##">小型现场</a></li>
                            <li><a href="##">音乐会</a></li>
                            <li><a href="##">演唱会</a></li>
                            <li><a href="##">音乐节</a></li>
                        </ul>
                    </div>
                </li>
                <li class="col">
                    <div class="cats-detail">
                        <h5>
                            <a href="##">音乐&gt;</a>
                        </h5>
                        <ul>
                            <li><a href="##">小型现场</a></li>
                            <li><a href="##">音乐会</a></li>
                            <li><a href="##">演唱会</a></li>
                            <li><a href="##">音乐节</a></li>
                        </ul>
                    </div>
                </li>
                <li class="col">
                    <div class="cats-detail">
                        <h5>
                            <a href="##">音乐&gt;</a>
                        </h5>
                        <ul>
                            <li><a href="##">小型现场</a></li>
                            <li><a href="##">音乐会</a></li>
                            <li><a href="##">演唱会</a></li>
                            <li><a href="##">音乐节</a></li>
                        </ul>
                    </div>
                </li>
                <li class="col">
                    <div class="cats-detail">
                        <h5>
                            <a href="##">音乐&gt;</a>
                        </h5>
                        <ul>
                            <li><a href="##">小型现场</a></li>
                            <li><a href="##">音乐会</a></li>
                            <li><a href="##">演唱会</a></li>
                            <li><a href="##">音乐节</a></li>
                        </ul>
                    </div>
                </li>
                <li class="col">
                    <div class="cats-detail">
                        <h5>
                            <a href="##">音乐&gt;</a>
                        </h5>
                        <ul>
                            <li><a href="##">小型现场</a></li>
                            <li><a href="##">音乐会</a></li>
                            <li><a href="##">演唱会</a></li>
                            <li><a href="##">音乐节</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <!-- 戏剧列表 -->
    <div id="much-list">
        <div class="xjlist">
            <div class="hd">
                <h2>戏剧</h2>
                <ul>
                    <li><a href="##">最热</a></li>
                    <li><a href="##">话剧</a></li>
                    <li><a href="##">音乐剧</a></li>
                    <li><a href="##">舞剧</a></li>
                    <li><a href="##">歌剧</a></li>
                </ul>
                <h3><a href="##">更多&gt;</a></h3>
            </div>

            <!-- 列表 -->
            <div class="bd">
                <div class="pic">
                    <!-- <div class="box1"> -->
                    <a href="##">
                        <img src="https://img3.doubanio.com/pview/event_poster/small/public/647f28bbcfe1982.jpg" alt="">
                    </a>
                    <!-- </div> -->
                    <div class="box2">
                        <a href="##">话剧《三湾,那一夜》</a>

                        <p>10月14日至10月25日</p>
                        <p>国家话剧院-剧场</p>
                        <p>1人关注</p>
                    </div>
                </div>

                <div class="pic">

                    <a href="##">
                        <img src="https://img3.doubanio.com/pview/event_poster/small/public/647f28bbcfe1982.jpg" alt="">
                    </a>

                    <div class="box2">
                        <a href="##">话剧《三湾,那一夜》</a>

                        <p>10月14日至10月25日</p>
                        <p>国家话剧院-剧场</p>
                        <p>1人关注</p>
                    </div>
                </div>
                <div class="pic">

                    <a href="##">
                        <img src="https://img3.doubanio.com/pview/event_poster/small/public/647f28bbcfe1982.jpg" alt="">
                    </a>

                    <div class="box2">
                        <a href="##">话剧《三湾,那一夜》</a>

                        <p>10月14日至10月25日</p>
                        <p>国家话剧院-剧场</p>
                        <p>1人关注</p>
                    </div>
                </div>
                <div class="pic">

                    <a href="##">
                        <img src="https://img3.doubanio.com/pview/event_poster/small/public/647f28bbcfe1982.jpg" alt="">
                    </a>

                    <div class="box2">
                        <a href="##">话剧《三湾,那一夜》</a>

                        <p>10月14日至10月25日</p>
                        <p>国家话剧院-剧场</p>
                        <p>1人关注</p>
                    </div>
                </div>
                <div class="pic">

                    <a href="##">
                        <img src="https://img3.doubanio.com/pview/event_poster/small/public/647f28bbcfe1982.jpg" alt="">
                    </a>

                    <div class="box2">
                        <a href="##">话剧《三湾,那一夜》</a>

                        <p>10月14日至10月25日</p>
                        <p>国家话剧院-剧场</p>
                        <p>1人关注</p>
                    </div>
                </div>
                <div class="pic">

                    <a href="##">
                        <img src="https://img3.doubanio.com/pview/event_poster/small/public/647f28bbcfe1982.jpg" alt="">
                    </a>

                    <div class="box2">
                        <a href="##">话剧《三湾,那一夜》</a>

                        <p>10月14日至10月25日</p>
                        <p>国家话剧院-剧场</p>
                        <p>1人关注</p>
                    </div>
                </div>
            </div>


        </div>





    </div>


    <div id="much-list">
        <div class="xjlist">
            <div class="hd">
                <h2>戏剧</h2>
                <ul>
                    <li><a href="##">最热</a></li>
                    <li><a href="##">话剧</a></li>
                    <li><a href="##">音乐剧</a></li>
                    <li><a href="##">舞剧</a></li>
                    <li><a href="##">歌剧</a></li>
                </ul>
                <h3><a href="##">更多&gt;</a></h3>
            </div>

            <!-- 列表 -->
            <div class="bd">
                <div class="pic">
                    <!-- <div class="box1"> -->
                    <a href="##">
                        <img src="https://img3.doubanio.com/pview/event_poster/small/public/647f28bbcfe1982.jpg" alt="">
                    </a>
                    <!-- </div> -->
                    <div class="box2">
                        <a href="##">话剧《三湾,那一夜》</a>

                        <p>10月14日至10月25日</p>
                        <p>国家话剧院-剧场</p>
                        <p>1人关注</p>
                    </div>
                </div>

                <div class="pic">

                    <a href="##">
                        <img src="https://img3.doubanio.com/pview/event_poster/small/public/647f28bbcfe1982.jpg" alt="">
                    </a>

                    <div class="box2">
                        <a href="##">话剧《三湾,那一夜》</a>

                        <p>10月14日至10月25日</p>
                        <p>国家话剧院-剧场</p>
                        <p>1人关注</p>
                    </div>
                </div>
                <div class="pic">

                    <a href="##">
                        <img src="https://img3.doubanio.com/pview/event_poster/small/public/647f28bbcfe1982.jpg" alt="">
                    </a>

                    <div class="box2">
                        <a href="##">话剧《三湾,那一夜》</a>

                        <p>10月14日至10月25日</p>
                        <p>国家话剧院-剧场</p>
                        <p>1人关注</p>
                    </div>
                </div>
                <div class="pic">

                    <a href="##">
                        <img src="https://img3.doubanio.com/pview/event_poster/small/public/647f28bbcfe1982.jpg" alt="">
                    </a>

                    <div class="box2">
                        <a href="##">话剧《三湾,那一夜》</a>

                        <p>10月14日至10月25日</p>
                        <p>国家话剧院-剧场</p>
                        <p>1人关注</p>
                    </div>
                </div>
                <div class="pic">

                    <a href="##">
                        <img src="https://img3.doubanio.com/pview/event_poster/small/public/647f28bbcfe1982.jpg" alt="">
                    </a>

                    <div class="box2">
                        <a href="##">话剧《三湾,那一夜》</a>

                        <p>10月14日至10月25日</p>
                        <p>国家话剧院-剧场</p>
                        <p>1人关注</p>
                    </div>
                </div>
                <div class="pic">

                    <a href="##">
                        <img src="https://img3.doubanio.com/pview/event_poster/small/public/647f28bbcfe1982.jpg" alt="">
                    </a>

                    <div class="box2">
                        <a href="##">话剧《三湾,那一夜》</a>

                        <p>10月14日至10月25日</p>
                        <p>国家话剧院-剧场</p>
                        <p>1人关注</p>
                    </div>
                </div>
            </div>


        </div>





    </div>
</body>

</html>